<template>
  <div class="like">
    <h3>猜你喜欢</h3>
    <div class="box">
      <div class="cent" v-for="item in like" :key="item.ItemCode">
        <img referrerpolicy="no-referrer" :src="item.img" alt="">

        <p class="tit">{{ item.Cpmc }}</p>
        <p class="price">￥{{ item.Price }}</p>
      </div>
    </div>
    <div class="end">已经到底喽...</div>
  </div>
</template>

<script>
export default {
  name: 'LlikeView',
  data() {
    return {
      like: [],
    }
  },
  mounted() {
    this.$axios.get('/api/list').then(res => {
      // console.log(res);
      // console.log(res.data.data.index.zb.data);
      // console.log(res.data.data.index)
      // let arr = [];
      // for (let index = 0; index < 6; index++) {
      //   arr.push(res.data.data.index[index]);
      // }
      this.like = res.data.data.index.zb.data;
    })
  }
}
</script>

<style scoped lang="less">
.like {
  h3 {
    padding-left: .3rem;
    padding-bottom: .3rem;
  }

  .end {
    margin: .3rem 0;
    text-align: center;
    padding-bottom: 1.2rem;
    color: #ccc;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .cent {
      width: 3.45rem;
      height: 4.88rem;
      margin-bottom: .2rem;
      // border: solid .01rem #ccc;
      box-shadow: 0rem 0.28571429rem 0.42857143rem 0rem #dee2e5;
      border-radius: .2rem;
      overflow: hidden;

      img {
        width: 3.45rem;
        height: 3.84rem;
      }

      .tit {
        overflow: hidden;
        height: .3rem;
        font-size: .28rem;
        margin: .2rem 0
      }

      .price {
        color: rgb(255, 143, 24);
      }
    }
  }
}
</style>